<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>44-jQuery自定义动画</title>
    <style>
        *{
             margin: 0;
             padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin-top: 10px ;
        }
        .two{
            background: blue;
        }
    </style>
    <script src="jQuery/jquery-3.4.1.js"></script>
    <script>
         $(function () {
             $("button").eq(0).click(function () {
                $(".two").animate({
                    //width:500
                    marginLeft:500
                },5000,function () {
                    //alert("自定义动画效果完毕");
                })
                 /*
                 第一个参数：接受一个对象，可以在对象中修改属性
                 第二个参数：指定动画时长
                 第三个参数：指定动画节奏，默认swing, 还有linear
                 第四个参数：动画执行完毕之后的回调函数
                  */
                 $(".one").animate({
                     marginLeft:500
                 },5000,"linear",function () {
                     //alert("自定义动画效果完毕");
                 })
             });
             $("button").eq(1).click(function () {
                 $(".one").animate({
                     width:"+=200"
                 },1000,function () {
                     //alert("自定义动画效果完毕");
                 })
             });
             $("button").eq(2).click(function () {
                 $(".one").animate({
                     //width:"hide"
                     width:"toggle"
                 },1000,function () {
                     //alert("自定义动画效果完毕");
                 })
             });
         })
    </script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div class="one"></div>
<div class="two"></div>
</body>
</html>